<template>
  <div>
    <el-card style="margin: 20px">
      <el-table
        class="category-list"
        :data="categorys"
        style="width: 90%; margin-bottom: 20px"
        border
        lazy
        :load="load"
        :row-key="getRowKey"
        :row-class-name="tableRowClassName"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="id" label="分类ID" width="150" align="center">
        </el-table-column>
        <el-table-column prop="name" label="分类名称"> </el-table-column>
        <el-table-column prop="address" label="地址" width="250" align="center">
          <template #header>
            <el-input size="mini" placeholder="按Enter键添加一级分类" />
          </template>
          <template v-slot="{ row }">
            <el-button
              size="mini"
              icon="el-icon-plus"
              type="primary"
              :disabled="!row.level"
            ></el-button>
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="primary"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Category",
  data() {
    return {
      categorys: [],
    };
  },
  methods: {
    // 显示一级分类
    async getCategory1List() {
      try {
        await this.$store.dispatch("category/getCategory1List");
        this.category1List.forEach((item) => {
          item.hasChildren = true;
          item.level = 1;
        });
        this.categorys = this.category1List;
      } catch (error) {}
    },
    // 获取二级分类
    async getCategory2List(row1) {
      await this.$store.dispatch("category/getCategory2List", row1.id);
      if (this.category2List && this.category2List.length > 0) {
        this.category2List.forEach((item) => {
          // 标识有子分类
          item.hasChildren = true;
          // 分类级别为2级
          item.level = 2;
        });
        return this.category2List;
      } else {
        row.hasChildren = false;
        return [];
      }
    },
    // 获取三级分类
    async getCategory3List(row2) {
      await this.$store.dispatch("category/getCategory3List", row2.id);
      if (this.category3List && this.category3List.length > 0) {
        return this.category3List;
      } else {
        row2.hasChildren = false;
        return [];
      }
    },
    async load(row, treeNode, resolve) {
      if (row.level === 1) {
        const res = await this.getCategory2List(row);
        resolve(res);
      } else if (row.level === 2) {
        const res = await this.getCategory3List(row);
        resolve(res);
      }
    },
    // 动态确定当前行的唯一key
    getRowKey(row) {
      return row.level + "-" + row.id;
    },
    // 返回二级分类的类名
    tableRowClassName({ row }) {
      if (row.level === 2) {
        return "level2-row";
      }
    },
  },
  computed: {
    ...mapState("category", [
      "category1List",
      "category2List",
      "category3List",
    ]),
  },
  mounted() {
    this.getCategory1List();
  },
};
</script>

<style lang="scss">
// .category-list {
.level2-row {
  background-color: #f0f9eb !important;
}
// }
</style>
